<template>
	<view class="resetpwd" @click="Tap">
		<form bindsubmit="formSubmit">
			<view v-if="!isFocus2">
				<view class="Toptitle">请输入支付密码</view>
				<view class='content' @click="Tap">
					<!-- :cursor-spacing = '10000'  :cursor='50000'-->
					<input name="password" v-model="Value" :adjust-position='false'
						:hold-keyboard='true' type="number" class='ipt' :maxlength="Length"
						:focus="isFocus" @input="Focus"></input>
					<block v-for="(item,index) in Length" :key="item">
						<input class='iptbox' :value="Value.length>=index+1?Value[index]:''" disabled
							:password='ispassword' @focus='Tap'></input>
					</block>
				</view>
			</view>

			<view v-else>
				<view class="Toptitle">请再次输入支付密码</view>
				<view class='content' @click="Tap">
					<input name="password" v-model="Value2" :adjust-position='false'
						:hold-keyboard='true' type="number" class='ipt' :maxlength="Length"
						:focus="isFocus2" @input="Focus2"></input>
					<block v-for="(item,index) in Length" :key="item">
						<input class='iptbox' :value="Value2.length>=index+1?Value2[index]:''" disabled
							:password='ispassword' @focus='Tap2'></input>
					</block>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		addresslist
	} from '@/api/my/address.js';
	export default {
		data() {
			return {
				Length: 6, //输入框个数
				isFocus: true, //聚焦
				isFocus2: false, //聚焦
				Value: "", //输入的内容
				Value2: "",
				ispassword: true, //是否密文显示 true为密文， false为明文。
				disabled: true,
				iptvalue: '',
				cursor: 10,

				mobile: "",
			}
		},
		onLoad(options) {
			this.mobile = options.mobile;
		},
		methods: {
			Focus(e) {
				let inputValue = e.detail.value;
				let ilen = inputValue.length;
				if (ilen == 6) {
					this.disabled = false;
					this.isFocus2 = true;
				} else {
					this.disabled = true;
				}
				this.Value = inputValue;
				this.cursor += 500;
			},
			Tap() {
				this.isFocus = true;
			},

			formSubmit(e) {
				console.log(e.detail.value.password);
			},

			Focus2(e) {
				let inputValue = e.detail.value;
				let ilen = inputValue.length;

				this.Value2 = inputValue;
				this.cursor += 500;

				if (ilen == 6) {
					if (this.Value == this.Value2) {
						this.disabled = false;
						this.isFocus2 = false;
						this.doEdit();
					} else {
						uni.showToast({
							title: '两次密码不一致，请重新设置！',
							duration: 2000,
							icon: "none"
						});
						this.resetData();
					}
				} else {
					this.disabled = true;
				}

			},
			Tap2() {
				this.isFocus2 = true;
			},
			// 数据重置
			resetData() {
				this.isFocus = true;
				this.isFocus2 = false;
				this.Value = "";
				this.Value2 = "";
			},

			doEdit() {
				uni.showLoading({
					title: `密码设置中`
				});
				let params = {
					mobile: this.mobile,
					password: this.Value,
					repassword: this.Value2,
				};
				addresslist('setPayPassword', params).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '支付密码设置成功',
							duration: 2000,
							icon: "none"
						});
						
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							})
						}, 1000)
						
						this.$store.dispatch("updateUserInfo")
					}
				}).catch(error => {
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #EFF0F1;
	}
</style>
<style lang="scss" scoped>
	@import "../my.scss";

	.resetpwd {
		color: #858585;
		font-size: 32rpx;
		padding-top: 160rpx;
		text-align: center;
	}

	.Toptitle {
		text-align: center;
		font-size: 26rpx;
	}

	.content {
		margin: 0 auto;
		width: 660rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 50rpx;
		position: relative;
		height: 96rpx;
		overflow: hidden;
		border: 2rpx solid #CECECE;
	}

	.iptbox {
		width: 110rpx;
		height: 96rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: #000000;
		font-weight: bold;
	}

	.iptbox:not(:last-child) {
		border-right: 2rpx solid #CECECE;
	}

	.ipt {
		width: 200%;
		height: 200rpx;
		position: absolute;
		left: -200rpx;
		bottom: 0;
		z-index: 11;
		opacity: 0;
		background-color: transparent;
		color: transparent;
		caret-color: transparent;
		text-align: left;
	}

	input {
		caret-color: transparent;
	}
</style>
